<template>
  <el-row>
    <el-col :span="3">Events</el-col>
    <el-col :span="3">{{ filterTableData.length }} Items</el-col>
    <el-col :span="12">
      <NamespaceDropDown ref="namespaceDropdown"></NamespaceDropDown>
    </el-col>
    <el-col :span="6">
      <el-input v-model="queryString" placeholder="查询内容" name="queryString" clearable @keyup.enter.native="query"></el-input>
    </el-col>
  </el-row>
  <el-row>
    <el-table :data="filterTableData" border style="width: 100%" v-loading="loading">
      <el-table-column prop="type" label="type" width="100" sortable/>
      <el-table-column prop="metadata.namespace" label="namespace" width="100" sortable/>
      <el-table-column prop="message" label="message" width="250" sortable/>

      <el-table-column prop="metadata.name" label="name" width="100" sortable/>
      <el-table-column prop="count" label="count" width="80" sortable/>
      <el-table-column label="source" width="120">
        <template
          #default="scope"
        >{{ scope.row.source ? (scope.row.source.component + " " + scope.row.source.host) : "" }}</template>
      </el-table-column>

      <el-table-column label="involvedObject" width="150">
        <template
          #default="scope"
        >{{ scope.row.involvedObject ? (scope.row.involvedObject.kind + " " + scope.row.involvedObject.name) : "" }}</template>
      </el-table-column>

      <el-table-column label="age" width="120" sortable prop="metadata.creationTimestamp">
        <template #default="scope">{{ to_age(scope.row.metadata.creationTimestamp) }}</template>
      </el-table-column>
      <el-table-column label="lastTime" width="120" sortable prop="lastTimestamp">
        <template #default="scope">{{ to_age(scope.row.lastTimestamp) }}</template>
      </el-table-column>
    </el-table>
  </el-row>
</template>
<script>
import { ref, nextTick } from "vue";
import { TableMixins } from '@/mixins/TableMixins'
import NamespaceDropDown from '@/components/k8s/NamespaceDropDown.vue'
import emitter from '@/eventbus';
export default {
  name: 'EventList',
  props: {
  },
  mixins: [TableMixins],
  components: { NamespaceDropDown },
  data() {
    return {
      tableData: [],
      loading: false,
      namespaces: [],
      queryString: "",
      yamlVisible: false,
    }
  },
  mounted() {
    this.query()
    emitter.on("query_namespaces", (newValue) => {
      this.namespaces = newValue
    });

  },
  computed: {
    filterTableData() {
      return this.tableData.filter(
        t => (this.namespaces.length == 0 || this.namespaces.includes(t.metadata.namespace))

      ).filter(

        t =>{ 
          return (

          t.type.toString().toUpperCase().includes(this.queryString.toString().toUpperCase())
          ||
          (t.name||"").toString().toUpperCase().includes(this.queryString.toString().toUpperCase())
          ||
          t.message.toString().toUpperCase().includes(this.queryString.toString().toUpperCase())
          ||
          t.source.host.toString().toUpperCase().includes(this.queryString.toString().toUpperCase())
        )
        }
      )
    }
  },
  methods: {

    async getItems() {

      let items = await window.k8s_GetEvents("");
      //console.log(items)
      return items
    },

  },
}
</script>
<style scoped>
/*弹出框高度样式调整*/
.mydialog :deep() .el-dialog__body {
  overflow: auto;
  height: 80vh;
}

.mydialog :deep() .el-tabs--border-card {
  height: 70vh;
}
.mydialog :deep() .el-tabs__content {
  height: 70vh;
}
.mydialog :deep() .el-tabs__content .el-tab-pane {
  height:70vh;
}
</style>